<template>
  <!-- 系统管理/综合配置 -->
  <div class="Configuration">
    <p class="title">综合配置:</p>
    <div class="content">
      <div class="content_items">
        <div class="item_box" @click="itemChange(item, index)" v-for="(item, index) in btnList" :key="item.title">
          <img
            @load="imgIsLoading"
            :class="checkIndex == index ? (isLoad ? 'iconCheck' : 'icon') : 'icon'"
            :src="checkIndex == index ? item.checkPic : item.pic"
          />
          <b class="name">{{ item.title }}</b>
        </div>
      </div>
      <div class="content_right">
        <!-- v-model="isCheckd" -->
        <keep-alive>
          <EmailConfig v-if="checkIndex === 0" @submit="emailSubmit" />
        </keep-alive>
        <!-- <keep-alive>
          <div v-if="checkIndex === 1">方便扩展</div>
        </keep-alive> -->
      </div>
    </div>
  </div>
</template>
<script>
import { getConfig, editConfig } from '@api/api'
import EmailConfig from '@comp/config/EmailConfig.vue'
export default {
  components: {
    EmailConfig
  },
  data() {
    return {
      checkIndex: 0,
      configList: [],
      isLoad: false, //isImgLoad
      btnList: [
        {
          title: '电子邮箱设置',
          pic: require('../../assets/email.svg'),
          checkPic: require('../../assets/email_active.svg'),
          paramKey: 'weekly_email_receiver'
        }
        // {
        //   title: '邮件发送仓库周报数据发件人',
        //   pic: require('../../assets/email.svg'),
        //   checkPic: require('../../assets/email_active.svg'),
        //   paramKey:'weekly_email_sender'
        // },
        // {
        //   title: '财务收支记账导入模板下载URL',
        //   pic: require('../../assets/email.svg'),
        //   checkPic: require('../../assets/email_active.svg'),
        //   paramKey:'finance_temp_import_excel_template_url'
        // },
      ],
      // 邮箱配置----
      isCheckd: false,
      emailConfig: {},

      paramKey: 'weekly_email_receiver'
      // 其他配置----
    }
  },
  created() {
    this.getConfiguration(this.paramKey)
  },
  methods: {
    // 获取配置数据
    async getConfiguration(paramKey) {
      const res = await getConfig({ paramKey: paramKey })
      if (res.success) {
        this.configList = res.result
        if (res.result.length) {
          //有配置
          const result = res.result //所有配置
          // this.emailConfig = result[0]
          // this.isCheckd = result[0].configSwitch === 0
        } else {
          this.$message.warning(res.message)
        }
      }
    },
    itemChange(item, index) {
      this.paramKey = item.paramKey
      this.checkIndex = index
      this.getConfiguration(this.paramKey)
    },
    // 提交邮件修改
    async emailSubmit(params) {
      const res = await editConfig(params)
      if (res.success) {
        this.$message.warning(res.message)
      } else {
        this.$message.warning(res.message)
      }
    },
    // 检查图片加载
    imgIsLoading() {
      console.log(arguments)
      // 处理样式问题
      this.isLoad = true
    }
  }
}
</script>
<style lang="less" scoped>
.Configuration {
  background: #ffffff;
  padding: 10px;
  font-style: Microsoft YaHei;
  p {
    margin: 0;
  }
  .title {
    margin: 0px 0 8px 15px;
    font-size: 18px;
    font-weight: bold;
    // color: #000;
  }
  .content {
    display: flex;
    .content_items {
      display: flex;
      flex-wrap: wrap;
      height: 180px;
      width: 220px;
      margin-right: 10px;
      .item_box {
        cursor: pointer;
        height: 90px;
        padding: 5px;
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        transition: all 0.3s ease;
        .name {
          text-align: center;
          font-size: 12px;
        }
        &:hover {
          transition: all 0.3s ease;
          background: #eee;
        }
        .icon {
          border: 1px solid transparent;
          padding: 10px 15px;
          transition: 0.3s all ease;
          //   border-radius: 8px;
        }
        .iconCheck {
          border: 1px solid #f2a654;
          padding: 10px 15px;
          border-radius: 8px;
          transition: 0.3s all ease;
        }
      }
    }
    .content_right {
      flex: 1;
    }
  }
}
</style>
